<head> - ［▌▣］

<head>

規範與網頁相關資訊（metadata）的區域

code:html

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>My Website</title>

<link rel="stylesheet" href="./style.css">

<link rel="icon" href="./favicon.ico" type="image/x-icon">

<script src="scripts.js"></script>

</head>

設定相關metadata

提供網頁資訊給瀏覽器、搜尋引擎

通常用於指定頁面描述、關鍵字、作者…等資訊

2017-12-01 你可以這樣用 HTML 的 Meta 標籤

2024-09-01 Dublin Core, what is it good for? – This day’s portion

也可控制使用者的瀏覽器viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

2022-11-17 viewport-fit=coverで対応。iPhoneのSafe Area問題。 / メモ / いがわ

2023-06-10 You can stop using user-scalable=no and maximum-scale=1 in viewport meta tags now - lukeplant.me.uk

現在已經不再需要maximum-scale和user-scalable

這些屬性反而對無障礙使用性不友善

當初加入的原因是為了解決早期的瀏覽器bug

現今應該採用更合適的方式處理

除非你有非常明確、針對特定平台的需求

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>

此網頁的標題

<style>

撰寫CSS樣式

<link>

引用CSS樣式檔案

<script>

引用JavaScript檔案，或撰寫JavaScript

<noscript>

JavaScript未執行時的替代顯示內容

<base>

網頁相對路徑

Get out of my <head>